<template>
    <div>
      <div class="item-color-box">
      {{ opera.name }}
    </div>
      <div>
        <el-select v-model="opera.category" placeholder="请选择分类" @change="getGoodList" clearable>
          <el-option
            v-for="item in categoryList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      
      <div>
        <el-select v-model="opera.good" placeholder="请选择商品" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            ></el-option>
        </el-select>
      </div>

      <div>
        <el-input v-model="opera.spec" placeholder="特殊链接"></el-input>
      </div>

      <div>
        <el-input v-model="opera.couponName" placeholder="优惠券名称"></el-input>
      </div>
          
    </div>
</template>

<script>
export default {
  props: {
    opera: Object,
    categoryList: Array
  },
  data() {
    return {
      options: []
    };
  },
  methods: {
    getGoodList(id, change = true) {
      if (change) this.goods = [];
      if (!id) return;
      const target = this.categoryList.find(item => item.value === id);
      if (target.children) {
        this.options = target.children;
      } else {
        this.fetchGoodList(id);
      }
    },
    fetchGoodList(id) {
      return axios
        .get(`https://nihaocai.zkong.me/api/categories/${id}`)
        .then(res => res.data.data.goods.map(item => this.genGood(item)))
        .then(goodList => {
          this.options = goodList;
          this.$emit('assertGoodList', id, goodList);
        });
    },
    genGood({ id, name, image, sale_price, unit, attributes_by_status }) {
      return {
        value: id,
        good: id,
        label: name,
        image: `${image}?x-oss-process=image/resize,m_pad,h_100,w_100`,
        price: sale_price,
        unit,
        attr: attributes_by_status || [],
        cate: this.category
      };
    }
  }
};
</script>
